<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屏蔽背景对话框</title>
   <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
    /*<!--  屏蔽背景部分-- >*/
    #black {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 2;
        background: rgba(0, 0, 0, 0.1);
        top: 0;
        left: 0;
    }

    /*对话框显示部分*/
    #dialogBox {
        display: none;
        position: fixed;
        z-index: 3;
        min-height: 250px;
        top: 45%;
        width: 425px;
        left: 53%;
        margin: -150px 0 0 -250px;
        background: #fff;
        padding: 15px;
        border-radius: 5px;
    }
</style>
</head>
<body>

<input id="test" type="button" value="弹出对话框">

<div>
    <div id="black"></div>
    <div id="dialogBox">对话内容</div>
</div>

</body>


<script>
    <!--item1 为背景部分就是对象 item2为对话框的js对象 -->
    function ShowHide(Boolean, item1, item2) {
            for (var i = 1, len = arguments.length; i < len; i++) {
                if (Boolean) {
                    arguments[i].style.display = 'block';
                } else {
                    arguments[i].style.display = 'none';
                }
            }
        }

    $(function() {
        var black = document.getElementById('black');
        var dialog = document.getElementById('dialogBox');
        document.getElementById('test').addEventListener('click', function() {
            ShowHide(true, black, dialog);
        });
    });


</script>
</html>